<template>
    <div class="login-box">
        <div class="login-cont">
            <!-- <el-form class="login-form" ref="loginForm" :model="form" :rules="rules" @keyup.enter.native="submitForm">
              <el-row>
                <el-col :lg="{span: 6, offset: 15}" :md="{span: 12, offset: 12}" :sm="{span: 24, offset: 0}">
                  <p class="title">{{ loginTitle }}</p>
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="{span: 6, offset: 15}" :md="{span: 12, offset: 12}" :sm="{span: 24, offset: 0}">
                  <el-form-item prop="name">
                    <el-input
                      v-model="form.name"
                      autocomplete="off"
                      prefix-icon="el-icon-user"
                      type="text"
                      placeholder="请输入管理员账户名">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row @click="passClick">
                <el-col :lg="{span: 6, offset: 15}" :md="{span: 12, offset: 12}" @click="passClick"
                        :sm="{span: 24, offset: 0}">
                  <el-form-item prop="password" @keydown="passInput" class="password-item" v-show="false">
                      <el-input
                        :type="pwdType"
                        autocomplete="off"
                        v-model="form.password"
                        prefix-icon="el-icon-lock"
                        placeholder="请输入密码"
                        @input="passInput"
                        @focus="passFocus">
                      </el-input>
                      <i id="icon-view" class="el-icon-view" @click="yanjing"></i>
                  </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="text" autocomplete="off" v-model="form.password" show-password prefix-icon="el-icon-lock"
                                  placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="{span: 6, offset: 15}" :md="{span: 12, offset: 12}" :sm="{span: 24, offset: 0}">
                  <el-button type="primary" @click="submitForm">登录</el-button>
                </el-col>
              </el-row>
            </el-form> -->
            <h1 class="blue-login">{{ loginTitle }}</h1>
            <el-form
                    class="login-form"
                    ref="loginForm"
                    :model="form"
                    :rules="rules"
                    @keyup.enter.native="submitForm"
                    @submit.native.prevent>
                <el-form-item prop="name">
                    <el-input
                            v-model="form.name"
                            autocomplete="off"
                            type="text"
                            placeholder="请输入账号">
                    </el-input>
                    <i class="user-logo"></i>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            type="text"
                            autocomplete="off"
                            v-model="form.password"
                            placeholder="请输入密码" @input="passInput">
                    </el-input>
                    <i class="psd-logo"></i>
                </el-form-item>
            </el-form>
            <div class="login-btn">
                <el-button @click="submitForm" :disabled="isValidate">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        components: {},
        props: ["tenantList"],
        data() {
            return {
                pwdType: 'text',
                isYanjing: false,
                loginTitle: PUZZLE_CONFIG.loginTitle,
                tenant: {
                    tenant_id: '',
                    tenName: ''
                },
                form: {
                    name: "",
                    password: ""
                },
                password: "",
                rules: {
                    name: [{required: true, message: "请输入用户名", trigger: "blur"}],
                    password: [{required: true, message: "请输入密码", trigger: "blur"}]
                },
                token: null,
                isUKey: window.PUZZLE_CONFIG.isUKey,
                isValidate: false
            };
        },
        created() {
            const reUserName = window.sessionStorage.getItem("username");
            if (reUserName) {
                this.form.name = reUserName;
                this.form.password = "";
                this.form.checked = true;
            }
        },
        methods: {
            yanjing() {
                this.isYanjing = !this.isYanjing;
                if (this.isYanjing) {
                    this.form.password = this.password
                } else {
                    this.passInput()
                }
            },
            /**
             * 点击登录按钮提交表单事件
             *
             */
            passFocus() {
                this.form.password = "";
                this.password = "";
            },
            passInput() {
                let hh = "";
                let pass = "";
                for (let i = 0; i < this.form.password.length; i++) {
                    hh += "*";
                    if (this.form.password.charAt(i) != "*") {
                        pass += this.form.password.charAt(i);
                    } else {
                        pass += this.password.charAt(i);
                    }
                }
                // console.log(pass, hh);
                this.password = pass;
                this.form.password = hh;

            },
            submitForm() {
                if (this.isValidate == false) {
                    this.$refs.loginForm.validate((valid) => {
                        if (valid) {
                            const params = {
                                username: this.form.name,
                                password: this.password,
                                grant_type: "welcome TPF!",
                           };
                            this.$emit("login", params);
                        } else {
                            return false;
                        }
                        return true;
                    });
                }
            },
            selectTenant(id) {
                let tenant = {};
                tenant = this.tenantList.find((item) => {//这里的chargingWorkNameList就是上面遍历的数据源
                    return item.id === id;
                    //筛选出匹配数据，是对应数据的整个对象
                });
                this.$emit("changeAppName", tenant);
            }
        }
    };
</script>

<style lang="less" scoped>
    .password-item {
        position: relative;

        #icon-view {
            position: absolute;
            right: 10px;
            top: 12px;
            cursor: pointer;

            &:hover {
                color: #409EFF;
            }
        }
    }

    // .login-box {
    //   // height: 100%;
    //   // background: url(../../assets/images/login/login_bg.png) no-repeat;
    //   // background-size: 100% 100%;
    //   // background-attachment: fixed;

    // }

    // .login-con {
    //   border-color: rgb(139, 170, 196);
    //   text-align: center;
    //   // padding: 100px;

    //   .title {
    //     color: rgb(15, 90, 165);
    //     font-size: 26px;
    //     margin-top: 51px;
    //   }
    // }
    .login-box {
        width: 400px;
        height: 420px;
        border-radius: 4px;
        background: #fff;
        position: absolute;
        top: 50%;
        right: 15%;
        margin-top: -210px;
        text-align: center;

        h1 {
            font-size: 18px;
            font-weight: bold;
            color: #22A5E2;
            padding-bottom: 48px;
            letter-spacing: 10px;
        }

        .login-cont {
            padding: 64px 50px 82px;
            height: 100%;

            .login-form {
                padding-bottom: 10px;

                .el-input {
                    border: 1px solid #979797;
                    border-radius: 4px;

                    .el-input__inner {
                        padding: 0 15px 0 38px !important;
                    }
                }

                .el-form-item {
                    position: relative;
                }

                .user-logo {
                    display: inline-block;
                    background: url('../../assets/images/login/user-logo.png') no-repeat;
                    width: 18px;
                    height: 18px;
                    position: absolute;
                    left: 12px;
                    top: 12px;
                }

                .psd-logo {
                    display: inline-block;
                    background: url('../../assets/images/login/psd-logo.png') no-repeat;
                    width: 18px;
                    height: 18px;
                    position: absolute;
                    left: 12px;
                    top: 12px;
                }
            }

            .login-btn {
                height: 40px;
                background: #22A5E2;
                border-radius: 4px;

                .el-button {
                    width: 100%;
                    height: 100%;
                    background: transparent;
                    color: #fff;
                    letter-spacing: 10px;
                    font-weight: bold;
                }

                .is-disabled {
                    background-color: #a0cfff;
                    border-color: #0acfff;
                }
            }
        }
    }
</style>
<style>
    .login-form .el-input .el-input__inner {
        padding: 0 15px 0 38px !important;
    }
</style>

